<template>
    <div>
        <div class="content-box">
            <article class="markdown-body" v-html="postHtml"></article>
            <div class="other-info">{{author}} 发表于 {{time}}</div>
            <div class="layer-icon">
                <i class="iconfont icon-jinghao"><i class="number">{{layerNum}}</i></i>
            </div>
        </div>
    </div>
</template>
<script>
import marked from 'marked'
import 'github-markdown-css/github-markdown.css'

export default {
    name:'Detail',
    props:['item'],
    data(){
        return {
            content:this.item.content,
            layerNum:this.item.layerNum,
            author:this.item.author,
            time:this.item.time,
        }
    },
    computed: {
        // 解析器配置
        prop () {
            let data = {
                subfield: false,// 单双栏模式
                defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
                editable: false,	// 是否允许编辑
                toolbarsFlag: false,
                scrollStyle: true
            }
            return data
        },
        postHtml:function(){
            return marked(this.content);
        }
    }
}
</script>
<style lang="scss" scoped>
@import url("//at.alicdn.com/t/font_2134349_bum5qgitzru.css");

.content-box{
    margin-top:40px;
    // margin-bottom: 30px;
    padding:40px;
    font-size: 18px;
    background-color: #eee;
    position: relative;
    border-radius: 30px;
}
.layer-icon{
    position: absolute;
    top:-20px;
    left:10px;
}
.icon-jinghao{
    color:#bbb;
    font-size: 40px;
    top:0;
    left:0;
    .number{
        font-weight: bolder;
        font-size: 35px;
    }
}
.other-info{
    margin-top:20px;
    font-size: 12px;
    color: #bbb;
}

</style>